<script setup lang="ts">
import type { VxeGridListeners } from 'vxe-table'
import { ElMessage, ElMessageBox } from 'element-plus'
import StoreForm from '@/pages/flagship-store/component/storeForm.vue'
import {
    deleteflageList,
    getflageList,
    updataflageList,
} from '@fl/api/flagship/flagship'
// addflageList
const router = useRouter()
type storeFormType = {
    enterprieName?: string
    shopName?: string
    shopStatus?: string
}
type sortType = {
    shopSort?: number
    id?: string
    shopName?: string
}
const storeFormState = ref<storeFormType>({
    enterprieName: '',
    shopName: '',
    shopStatus: '',
})
const sortVisible = ref<boolean>(false)
const sortObj = reactive<sortType>({
    shopSort: 1,
    id: '',
    shopName: '',
})
// form表单列
const columns = [
    {
        colProps: {
            span: 8,
        },
        label: '企业名称',
        prop: 'enterprieName',
        valueType: 'copy',
        fieldProps: {
            maxlength: 20,
        },
    },
    {
        colProps: {
            span: 8,
        },
        label: '品牌名称',
        prop: 'shopName',
        valueType: 'copy',
        fieldProps: {
            maxlength: 20,
        },
    },
    {
        colProps: {
            span: 8,
        },
        label: '品牌启用状态',
        options: [
            {
                label: '启用',
                value: 1,
            },
            {
                label: '未启用',
                value: 0,
            },
        ],
        prop: 'shopStatus',
        valueType: 'select',
    },
]
const dialogVisible = ref<boolean>(false)
const addStoreFormRef = ref<any>()

// 新增品牌
function addstoreclick() {
    dialogVisible.value = true
}
const gridOptions = reactive({
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'enterprieName', title: '企业名称' },
        { field: 'enterprieAbbreviation', title: '企业简称' },
        { field: 'unifiedSocialCreditIdentifier', title: '统一社会信用代码' },
        { field: 'enterprieTell', title: '企业电话' },
        { field: 'shopName', title: '品牌名称' },
        { field: 'shopLinkMan', title: '品牌联系人' },
        { field: 'shopLinkManTell', title: '品牌联系人电话' },
        { field: 'createTime', title: '创建时间' },
        { field: 'shopLabel', title: '品牌标签' },
        // { field: "shopStatusVlaue", title: "品牌启用状态" },
        { slots: { default: 'shopStatus' }, title: '品牌启用状态', width: 120 },
        { slots: { default: 'operate' }, title: '操作', width: 220 },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 530,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 100,
    },
    showOverflow: true,
})
// 分页器操作
const gridEvents: VxeGridListeners = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }

        getTableList()
    },
}
async function getTableList() {
    gridOptions.loading = true
    const options: any = {
        ...storeFormState.value,
        pageNum: gridOptions.pagerConfig.currentPage,
        pageSize: gridOptions.pagerConfig.pageSize,
    }
    getflageList(options).then((res) => {
        gridOptions.loading = false
        gridOptions.data = res.data.records || []
        gridOptions.pagerConfig.total = res.data?.total
        gridOptions.data.forEach((item: any) => {
            if (item.shopStatus === 1) {
                item.shopStatusVlaue = true
            }
            else {
                item.shopStatusVlaue = false
            }
        })
    })
}

// 查询重置
function searchchange(key) {
    if (!key) {
    // 重置
        storeFormState.value.enterprieName = ''
        storeFormState.value.shopName = ''
        storeFormState.value.shopStatus = ''
    }
    getTableList()
}
/** 提交按钮 */
function popsubmit() {
    // 调用表单校验
    addStoreFormRef.value.validatechange()
}
function editclick(row: any) {
    router.push({
        path: '/content-center/flagship-store/editFlagshipStore',
        query: {
            id: row.id,
        },
    })
}
function sortclick(row: any) {
    sortVisible.value = true
    sortObj.shopSort = row.shopSort
    sortObj.id = row.id
    sortObj.shopName = row.shopName
}
function sortsubmit() {
    console.log(sortObj)
    updataflageList(sortObj).then(() => {
        getTableList()
        sortVisible.value = false
    })
}
// 新增品牌
function storeformchange(data) {
    if (data) {
        dialogVisible.value = false
        getTableList()
    }
    else {
        ElMessage.warning('品牌名称重复不可提交！')
    }
}
// 删除品牌
function deleteclick(row: any) {
    ElMessageBox.confirm('是否确定删除品牌?', '注意', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        const arr = []
        arr.push(row.id)
        deleteflageList(arr).then(() => {
            getTableList()
        })
    })
}
// 是否启用
function switchSingleChang(row) {
    console.log(row)
    if (row.shopStatusVlaue) {
        row.shopStatus = 1
    }
    else {
        row.shopStatus = 0
    }
    updataflageList(row).then((res) => {
        if (res.data) {
            ElMessage.success(res.msg)
        }
        else {
            ElMessage.warning(res.msg)
        }
        getTableList()
    })
}
onMounted(() => {
    getTableList()
})
</script>

<template>
    <div class="p-30 mb-20 bg-white flex">
        <div class="pr-24 flex-1">
            <PlusForm v-model="storeFormState"
                      :columns="columns"
                      :row-props="{ gutter: 20 }"
                      label-width=""
                      :has-footer="false"
            />
        </div>

        <div>
            <ElButton type="primary"
                      @click="searchchange(1)"
            >
                搜索
            </ElButton>

            <ElButton @click="searchchange(0)">
                重置
            </ElButton>
        </div>
    </div>

    <div class="p-30 bg-white">
        <div class="mb-20">
            <ElButton type="primary"
                      @click="addstoreclick"
            >
                新增品牌
            </ElButton>
        </div>

        <vxe-grid v-bind="gridOptions"
                  v-on="gridEvents"
        >
            <template #operate="{ row }">
                <vxe-button size="small"
                            content="排序"
                            @click="sortclick(row)"
                />

                <vxe-button size="small"
                            content="编辑"
                            @click="editclick(row)"
                />

                <vxe-button size="small"
                            status="danger"
                            content="删除"
                            @click="deleteclick(row)"
                />
            </template>

            <template #shopStatus="{ row }">
                <vxe-switch v-model="row.shopStatusVlaue"
                            @change="switchSingleChang(row)"
                />
            </template>
        </vxe-grid>
    </div>

    <el-dialog v-model="dialogVisible"
               title="新建品牌"
               width="60vw"
    >
        <div class="storeform">
            <StoreForm ref="addStoreFormRef"
                       @storeformchange="storeformchange"
            />
        </div>

        <template #footer>
            <div class="form-btn">
                <el-button plain
                           @click="dialogVisible = false"
                >
                    关闭
                </el-button>

                <el-button type="primary"
                           @click="popsubmit"
                >
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="sortVisible"
               title="排序"
               width="40vw"
    >
        <el-input-number v-model="sortObj.shopSort"
                         :min="1"
                         placeholder="请输入"
        />

        <template #footer>
            <div class="form-btn">
                <el-button plain
                           @click="sortVisible = false"
                >
                    关闭
                </el-button>

                <el-button type="primary"
                           @click="sortsubmit"
                >
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.storeform {
    height: 60vh;
    overflow: auto;
    &::-webkit-scrollbar {
        display: none;
    }
}
</style>
